<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="800px">
    <div class="form-box">
      <el-form ref="form" :model="form" :rules="rules" label-width="auto" class="demo-ruleForm">
        <el-form-item label="商品ID" prop="" >
          <span>{{goodsInfo.id}}</span>
        </el-form-item>
        <el-form-item label="账号" prop="accountNumber">
          <span>{{goodsInfo.accountNumber}}</span>
        </el-form-item>
        <el-form-item label="绑定手机号" prop="">
          <span>{{goodsInfo.tel}}</span>
        </el-form-item>
        <el-form-item label="监控任务" prop="monitorTaskId">
          <el-select v-model="form.monitorTaskId">
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item,key) in taskList"
              :key="key"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="center">
          <el-button @click="close()">取消</el-button>
          <el-button type="primary" @click="submitForm('form')" v-loading="loading">提交</el-button>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import checkPhoneApi from "@/api/gameConfig/checkPhonePx";
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      allUsers: [],
      // 表单参数
      form: {
        goodsIds: '',
        monitorTaskId:''
      },
      title: "新增",
      isEdit: false,
      flag:'',
      rules: {
      },
      paramsObj:{
        isPage:2,
        type:1
      },
      taskList:[],
      goodsInfo:{}
    };
  },
  created() {
  },
  methods: {
    // 打开弹窗
    open(data) {
      this.form.monitorTaskId = ''
      this.form.goodsIds = data.id
      this.title = "添加到账号监控";
      this.dialogVisible = true;
      this.goodsInfo = {...data}
      if(data.saleState==3){
        this.paramsObj.type = 2
      }else if(data.saleState==1){
        this.paramsObj.type = 1
      }
      this.getList()
    },
    // 
    // 获取监控任务列表
    getList() {
      this.taskList = [];
      this.loading = true;
      this.$nextTick(() => {
        checkPhoneApi
          .monitorTaskList(this.paramsObj)
          .then((response) => {
            this.loading = false;
            this.taskList= response.rows;
          })
          .catch((err) => {
            this.loading = false;
          });
      });
    },
    // 重置
    reset() {
      this.$refs.form.resetFields();
    },
    submitForm(formName) {
      this.$refs["" + formName].validate(valid => {
        if (valid) {
          checkPhoneApi.taskAddGoods(this.form).then(res => {
              this.$message.success(res.msg);
              this.dialogVisible = false;
              this.$parent.getList();
              this.$alert('加入账号监控成功，请在 “使用工具>账号监控” 进行查询监控任务和记录。如果您想批量添加商品，请在“使用工具>账号监控>监控任务” 中添加')
            });
        } else {
          this.$alert("请填写完整！");
        }
      });
    },
    close() {
      this.dialogVisible = false;
    }
  }
};
</script>
<style scoped lang="css">
.tip{
  color: rgb(0, 162, 255);
  padding-left: 110px;
}
.center {
  text-align: center;
}

.form-box {
  padding-top: 20px;
  padding-left: 20px;
}

.form-box>>>.el-input {
  width: 250px;
}

.form-box>>>img {
  width: 100%;
}

.form-box>>>.el-upload-dragger {
  width: 148px;
  height: 148px;
}



.form-box>>>.el-form-item__content {
  max-width: 655px;
}

::v-deep .el-input-number.is-without-controls .el-input__inner {
  text-align: left;
}
</style>
